<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>根据年级筛选学生信息</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        body {
            padding: 20px;
        }

        table {
            width: 600px;
            margin-top: 20px;
        }

        td,
        th {
            padding: 3px 0px;
        }

        button {
            width: 60px;
        }
    </style>
</head>

<body>
    <div>
        <select id="grade">
            <option value="0">--请选择年级--</option>
        </select>
        <button id="find"> 查询 </button>
    </div>
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年级</th>
                <th>电话</th>
            </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        loadGrades()  //调用加载年级信息的方法
        loadStudents()  //调用加载学生信息的方法

        //查询按钮点击事件
        $('#find').click(function(){
            loadStudents()  //调用加载学生信息的方法
        })

        //加载年级信息的方法
        function loadGrades() {
            // jQuery的ajax()方法
            $.ajax({
                type: "GET",   //请求方式：GET、POST
                url: "http://119.45.221.185:81/Grade/GetAll",       //请求地址
                data: {},     //请求传递的数据，注意：可以传一个对象，也可以传一个字符串
                async: true,  //true表示异步请求，false表示同步请求
                dataType: "json",  //返回的数据类型
                success: function (res) {
                    res.forEach(r => {
                        let option = $('<option/>').html(r.GradeName).attr('value', r.GradeId)
                        $('#grade').append(option)
                    });
                },  //请求成功后的回调
                error: function () {
                    console.log('发生错误');
                },  //请求失败后的回调
                beforeSend: function () {
                    //请求前的回调
                    console.log('开始请求');
                }
            })
        }
        //加载学生数据的方法
        function loadStudents() {
            $.ajax({
                type: "GET",   //请求方式：GET、POST
                url: "http://119.45.221.185:81/Student/GetStudentsByGrade",       //请求地址
                data: {gradeId:$("#grade").val()},     //请求传递的数据，注意：可以传一个对象，也可以传一个字符串
                async: true,  //true表示异步请求，false表示同步请求
                dataType: "json",  //返回的数据类型
                success: function (res) {
                    $('#tbody').empty()  //清空所有的tr
                    res.forEach(r=>{
                        let tr = $('<tr/>')
                        let td1 = $('<td/>').html(r.StudentNo)
                        let td2 = $('<td/>').html(r.StudentName)
                        let td3 = $('<td/>').html(r.Sex==='M'?'男':'女')
                        let td4 = $('<td/>').html(r.Grade.GradeName)
                        let td5 = $('<td/>').html(r.Phone)
                        tr.append(td1)
                        tr.append(td2)
                        tr.append(td3)
                        tr.append(td4)
                        tr.append(td5)
                        $('#tbody').append(tr)
                    })
                },  //请求成功后的回调
                error: function () {
                    console.log('发生错误');
                },  //请求失败后的回调
                beforeSend: function () {
                    //请求前的回调
                    console.log('开始请求');
                }
            })
        }
    </script>
</body>

</html>